<!--
  Generated template for the GoodsListPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
    <div class="header">
      <ion-searchbar [(ngModel)]="keyWrods" (ionInput)="onInput($event)" [placeholder]="'请输入你想搜索的内容'"></ion-searchbar>
      <span class="search_btn" (click)="getGoodsList()">搜 索</span>
    </div>
  </ion-navbar>
</ion-header>


<ion-content>
  <ion-refresher  (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="md-arrow-down" pullingText="下拉刷新..." refreshingSpinner="ios" refreshingText="正在刷新..."></ion-refresher-content>
  </ion-refresher>
  <ion-toolbar no-border-top>

    <ion-segment  [(ngModel)]="order" (ngModelChange)="orderChange($event)">
      <ion-segment-button value="" (click)="reset()">
        综 合
      </ion-segment-button>
      <ion-segment-button value="ng.sales" (click)="sort=sort=='asc'&& order=='ng.sales'?'desc':'asc';page=1;getGoodsList()">
        销 量
        <ion-icon [name]="sort=='asc' && order=='ng.sales' ?'md-arrow-up':'md-arrow-down'"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="ng.is_new" (click)="sort=sort=='asc'&& order=='ng.is_new'?'desc':'asc';page=1;getGoodsList()">
        新 品
        <ion-icon [name]="sort=='asc' && order=='ng.is_new' ?'md-arrow-up':'md-arrow-down'"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="ng.price" (click)="sort=sort=='asc'&& order=='ng.price'?'desc':'asc';page=1;getGoodsList()">
        价 格
        <ion-icon [name]="sort=='asc' && order=='ng.price' ?'md-arrow-up':'md-arrow-down'"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
  <ul class="goods_list">
    <li *ngFor="let item of goodsList" (click)="goGoodsDetail(item.goods_id)">
      <image [src]="item.pic_cover_mid" alt=""></image>
      <div>
        <p class="name">{{item.goods_name}}</p>
        <p class="note">
          <span class="hot" *ngIf="item.is_hot == 1">热销</span>
          <span class="rec" *ngIf="item.is_recommend == 1">推荐</span>
          <span class="new" *ngIf="item.is_new == 1">精品</span>
        </p>
        <p class="price">
          <span>¥ {{item.price}}</span>
          <span>¥ {{item.market_price}}</span>
        </p>
        <p class="star">
          <star [stars]="item.star/item.evaluates"></star>
          <span> {{item.evaluates}} 评论</span>
          <span> {{item.sales}} 购买 </span>
          <span> {{item.clicks}} 点击 </span>
          <span> {{item.collects}} 收藏 </span>
        </p>
        <ion-icon name="md-cart"></ion-icon>
      </div>
    </li>
  </ul>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
